<template>
	<div class="anthology">
	    <div class="anthologyList" v-for="(item,index) in filmList" :key='index' @click="sendFilmInfo($event,index)">
	    	<div class="imgBox">
	    		<img :src="item.imgUrl" alt="" />
	    	</div>
	    	<div class="contentBox">
	    		<p>{{item.figure_info}}</p>
	    		<p>简介:{{item.filmDesc}}</p>
	    	</div>
	    </div>
	</div>
</template>

<script>
export default{
	name:"anthology",
	data(){
		return{
			filmList:[],
			currentFilmInfo:[]
		}
	},
	methods:{
		sendFilmInfo(event,num){
//			console.log(num)
			this.$emit("currentFilmInfo",this.currentFilmInfo);
		},
		cutDesc(desc){
			if (desc.length>40){
			    desc = desc.substring(0,40)+'...';
			}
			return desc;
		}
	},
	created(){
		var nowIndex=this.$route.query.id;
//		console.log(this.$route.query.id)
		
		this.$axios.get("http://127.0.0.1:3000/filmList")
	    .then(res=>{
	    	var newData=res.data.filmList[nowIndex].details;
	    	var filmList=[]
	    	this.filmList=filmList;
//	    	console.log(newData)
	    	for(var item in newData){
	    		var filmListObj={
	    			imgUrl:newData[item].imgUrl,
	    			figure_info:newData[item].figure_info,
	    			filmDesc:this.cutDesc(newData[item].filmDesc)
	    		}
	    		filmList.push(filmListObj);
	    		this.currentFilmInfo=newData[item]
	    	}
//	    	console.log(this.currentFilmInfo)
	    })
	    .catch(error=>{
	    	console.log(error)
	    })
	}
}
</script>

<style scoped lang="less">
@current:100rem;
	.anthology{
		margin-top: 60/@current;
		.anthologyList{
			border-bottom: 1px solid #D7D2E0;
			overflow: hidden;
			padding: 10/@current 20/@current;
			.imgBox{
				float:left;
				width: 215/@current;
				height: 145/@current;
				img{
					width: 215/@current;
					height: 145/@current;
				}
			}
			.contentBox{
				width: 370/@current;
				float:left;
				margin-left: 12/@current;
				p:nth-child(1){
					font-size: 26/@current;
					
					/*点击后的字体样式*/
					/*color: #a54be8;*/
				}
				p:nth-child(2){
					/*overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;*/
					margin-top: 10/@current;
					font-size: 24/@current;
					color: #959595;
				}
			}
		}
	}
</style>